<template>
  <div>
    <div class="sonsulttig">
      <p>{{tiginfo}}</p>
    </div>
    <form class="form">
      <div class="cu-form-group margin-top flex-start">
        <div class="title">标题</div>
        <input placeholder="请输入咨询标题" name="title" v-model="formdata.title" />
      </div>
      <div class="cu-form-group justify-between">
        <div class="title">咨询的分类</div>
        <div @click="selectNav()" style="flex:1;text-align: right">
          <span>{{navdate.name?'你的选择是：'+ navdate.name:'选择分类'}}</span>
          <nut-icon type="right"></nut-icon>
        </div>
        <nut-picker
          :is-visible="pick"
          :default-value-data="defaultValueData1"
          :list-data="navList"
          @close="switchPicker('pick')"
          @confirm="setChooseValue1"
        >
        </nut-picker>
      </div>
      <div class="cu-form-group flex-start" v-if="showsg">
        <div class="title">姓名</div>
        <input placeholder="请输入姓名" name="xingming" v-model="formdata.xingming" />
      </div>
      <div class="cu-form-group justify-between" v-if="showsg">
        <div class="title">日期选择</div>
        <div @click="selectdate()"  style="flex:1;text-align: right">
          <span>{{formdata.date?'你的选择是：'+ formdata.date:'选择日期'}}</span>
          <nut-icon type="right"></nut-icon>
        </div>
        <nut-picker
          :is-visible="pickdate"
          :default-value-data="defaultValueData1"
          :list-data="datelist"
          @close="switchPicker('pickdate')"
          @confirm="setChooseValue2"
        >
        </nut-picker>
      </div>
      <div class="cu-form-group justify-between" v-if="showsg">
        <div class="title">时间选择</div>
        <div @click="selecttime()"  style="flex:1;text-align: right">
          <span>{{formdata.time? formdata.time:'选择时间'}}</span>
          <nut-icon type="right"></nut-icon>
        </div>
        <nut-picker
          :is-visible="picktime"
          :default-value-data="defaultValueData1"
          :list-data="timelist"
          @close="switchPicker('picktime')"
          @confirm="setChooseValue3"
        >
        </nut-picker>
      </div>
      <div class="cu-form-group ">
        <textarea maxlength="-1" name="content" auto-height="true" bindinput="textareaAInput" :placeholder="tiginfo" v-model="formdata.content"></textarea>
      </div>

      <div class="addfile">
        <div class="grid col-4 grid-square justify-start flex-sub">
          <div class="bg-img" v-for="(item, index) of formdata.url" :key="item.id">
            <img :src='item' mode='aspectFill' />
            <div class="cu-tag bg-red" @click="DelImg(index)" >
              <i class="cuIcon-close"></i>
            </div>
          </div>
        </div>
        <div class="grid col-4 grid-square flex-sub" v-if="formdata.url2">
          <div v-for="item of formdata.url2" :key="item.id">

            <video class="videosty" id="myVideo" :src="formdata.url2" enable-danmu controls>
<!--              <cover-view class="cu-tag bg-red" style="right:0;top:0;position: absolute;" catchtap="DelVoide" data-index="{{index}}">-->
<!--                <cover-view class="">x</cover-view>-->
<!--              </cover-view>-->
            </video>
          </div>
        </div>

        <div class="rong-message col-2 grid-square flex-sub" v-if="formdata.url3[0]" style="width:100%;">
          <div v-for="item of voiceUrl" :key="item.id">
            <div class='rong-message-voice' bindtap='audioPlay'>
              <img v-if="item.bl==true" class='rong-playing playicon' src='../../assets/images/yuyin.gif' />
              <img v-if='item.bl==false' class='rong-playing playicon' src='../../assets/images/yuyin.png'/>
              <div class='rong-audio'></div>
              <div style='padding-right:.5rem;'>{{item.duration}}</div>

              <div class="cu-tag bg-red" @click="Delmp()" >
                <i class="cuIcon-close"></i>
              </div>
            </div>
          </div>
        </div>
        <div class="grid col-4 grid-square justify-center flex-sub">
          <div class="solids" v-if="formdata.url.length<4">
            <i class="cuIcon-cameraadd"></i>
            <input type="file" @change="ChooseImage($event)" accept="image/*" multiple="multiple" ref="inputfile">
          </div>
          <div class="solids" v-if="formdata.url2.length<1">
            <i class="cuIcon-voice"></i>
            <input type="file" @change="chooseVieo($event)" accept="video/*" multiple="multiple" name="files" ref="inputfiletwo">
          </div>
          <div class="solids" @click='startRecording()' @keyup="stopRecording">
            <i class="cuIcon-btn"></i>
          </div>
        </div>
<!--        <nut-imagepicker-->
<!--          @imgMsg="imgMsg"-->
<!--          :max="4"-->
<!--          delMode="longtap"-->
<!--          :longTapTime="longTapTime"-->
<!--        >-->
<!--        </nut-imagepicker>-->
        <div v-if='isRecording' class='rong-voice-recording'>
          <img src='../../assets/images/b.gif' />
        </div>
        <div class="formFoot">
          <i class="formText">上传的相关资料</i>
          <i class="formText">只有您和当前平台可见，平台会确保您的隐私安全</i>
          <a @click="onsubmit()" class="formBtn">提交</a>
          <p  class="formrichText" v-if="isplus!=1">所需金币：<b>{{money}}</b></p>
          <p  class="formrichText" v-else>当前是<b>会员</b>，可免费咨询</p>
        </div>
      </div>

    </form>
    <div v-if='isRecording' class='rong-voice-recording'>
      <img src='../../assets/images/b.gif' />
    </div>
  </div>
</template>

<script>
import { getNavList, uploadimg, addorder } from '@/api/consult'
import axios from 'axios'
export default {
  name: 'consultFrom',
  data () {
    return {
      voiceUrl: [],
      navList: [],
      datelist: [
        [
          '2010年',
          '2011年',
          '2012年',
          '2013年',
          '2014年',
          '2015年',
          '2016年',
          '2017年',
          '2018年',
          '2019年',
          '2020年',
          '2021年',
          '2022年',
          '2023年',
          '2024年',
          '2025年',
          '2026年',
          '2027年',
          '2028年',
          '2029年',
          '2030年',
          '2031年',
          '2032年',
          '2033年',
          '2034年',
          '2035年',
          '2036年',
          '2037年',
          '2038年',
          '2039年'
        ],
        ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        ['1日', '2日', '3日', '4日', '5日', '6日', '7日', '8日', '9日', '10日', '11日', '12日', '13日', '14日', '15日', '16日', '17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日']
      ],
      timelist: [
        ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'],
        ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
      ],
      formdata: {
        url3: [],  //语音
        url: [], //图片
        url2: [], //视频
        time: '',
        date: '',
        title: '',
        content: '',
        xingming: '',
        from_data: '公众号'
      },
      longTapTime: 2000,
      isRecording: false,
      date: '',
      isplus: '',
      money: '',
      navdate: {
        id: '',
        name: '',
        CateLevel: ''
      },
      defaultValueData1: [],
      pick: false,
      picktime: false,
      pickdate: false,
      showsg: false,
      tiginfo: '请用10-500字详细描述您的问题，专家将根据你的问题进行详细解答'
    }
  },
  components: {
  },
  created () {
    getNavList().then(res => {
      console.log(res)
      let nalist = res.data
      nalist && nalist.map(res => {
        console.log((res))
        res['value'] = res.CateName
        delete res.sub
      })
      this.navList.push(nalist)
      console.log(this.navList)
    })
  },
  methods: {
    ChooseImage (event) {
      console.log(event.target.files[0])
      let inputDOM = this.$refs.inputfile
      // 通过DOM取文件数据
      let formDatas = new FormData() //通过formdata上传
      formDatas.append('file', inputDOM.files[0])
      var that = this
      axios.post('/upload_data', formDatas, {
        method: 'post',
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(res => {
        console.log(res)
        that.formdata.url.push(res.data.data)
        console.log(this.formdata)
      }).catch(function (error) {
        console.log(error)
      })
      // uploadimg(formData).then(res => {
      //   console.log(res)
      // })
    },
    DelImg (e) {
      this.formdata.url.splice(e, 1)
    },
    onsubmit (e) {
      console.log(this.formdata)
      console.log(this.navdate)
      if (!this.formdata.title) {
        this.$toast.text('请填写咨询标题')
        return
      } else if (!this.formdata.content) {
        this.$toast.text('请填写咨询内容')
        return
      } else if (!this.navdate.id) {
        this.$toast.text('请选择咨询分类')
        return
      }
      var data = this.formdata
      var fromvalue = {
        url3: this.formdata.url3,
        url: this.formdata.url,
        url2: this.formdata.url2,
        time_jilu: this.formdata.time + ' ' + this.formdata.date,
        uid: localStorage.getItem('uid'),
        title: this.formdata.title,
        content: this.formdata.content,
        xingming: this.formdata.xingming,
        from_data: '公众号',
        cate_id: this.navdate.id,
        cate_name: this.navdate.name
      }
      console.log(fromvalue)
      addorder(fromvalue).then(res => {
        console.log(res)
        this.$toast.success('提交成功')
      })
    },
    imgMsg (data) {
      if (data.code === 1) {
        alert('upload')
      }
      console.log(this.imgList2)
      console.log(data) //code 1 自动上传  2 不上传只展示图片  3 删除图片  4 预览图片
    },
    selectNav () {
      this.pick = true
    },
    selecttime () {
      this.picktime = true
    },
    selectdate () {
      this.pickdate = true
    },
    chooseVieo (event) {
      console.log(event.target.files[0])
      let inputDOM = event.target.files[0]
      // 通过DOM取文件数据
      let formDatas = new FormData() //通过formdata上传
      formDatas.append('file', inputDOM)
      var that = this
      axios.post('/upload_data', formDatas, {
        method: 'post',
        headers: {'Content-Type': 'multipart/form-data'}
      }).then(res => {
        console.log(res)
        that.formdata.url2.push(res.data.data)
        console.log(this.formdata)
      }).catch(function (error) {
        console.log(error)
      })
    },
    stopRecording () {
    },
    switchPicker (param) {
      this[`${param}`] = !this[`${param}`]
    },
    setChooseValue1 (chooseData) {
      console.log(chooseData)
      if (chooseData[0].id === 5) {
        this.showsg = true
      } else {
        this.showsg = false
      }
      this.navdate.name = chooseData[0].CateName
      this.navdate.id = chooseData[0].id
      this.navdate.CateLevel = chooseData[0].CateLevel
    },
    setChooseValue2 (val) {
      console.log(val)
      this.formdata.date = val[0] + '-' + val[1] + '-' + val[2]
    },
    setChooseValue3 (val) {
      console.log(val)
      this.formdata.time = val[0] + ':' + val[1]
    }
  }
}
</script>

<style lang="" scoped>
  /* pages/consult/consultForm/index.wxss */
  .justify-between{
    justify-content: space-between;
    flex: 1;
  }
  .flex-start{
    justify-content: flex-start;
  }
  .form{
    border-top: .2rem solid #f5f5f5;
  }
  .addfile{
    background: #fff;
    padding: .3rem;
    margin-top: .2rem;
  }
  .addfile .formText{
    color: #999;
    font-size: .22rem;
    display: block;
    text-align: center;
  }
  .flex-sub{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-bottom: .6rem;
  }
  .flex-sub .solids{
    margin: 0 .2rem;
    position: relative;
    border:1px solid #efefef;
    padding: .2rem;
  }
  .flex-sub .solids i{
    font-size: .6rem;
    color: grey;
  }
  .formFoot{
    width: 100%;
    margin: 0 auto;
    text-align: center;
  }
  .formFoot i{
    margin-bottom: .1rem;
  }
  .formBtn{
    background: #E37713;
    color: #fff;
    font-size: .32rem;
    margin: 0 auto;
    text-align: center;
    margin-top: .3rem;
    width: 70%;
    display: block;
    line-height: 1rem;
    border-radius: .5rem;
  }

  .rong-voice-recording {
    position: absolute;
    top: 35%;
    left: 38%;
    background-size: contain;
    height: 2rem;
    width: 2rem;
    opacity: 0.8;
    border-radius: .1rem;
    padding: .1rem;
    z-index: 9;
  }

  .rong-voice-recording image {
    width: 2rem;
    height: 2rem;
  }

  .rong-audio {
    width: 1rem;
    height: .5rem;
  }

  .rong-message {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 .2rem ;
    background: #fff;
    position: relative;
  }

  .rong-message-voice {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: .3rem .2rem;
    height: .75rem;
    box-shadow: 0px 10px 3px -5px rgba(217, 221, 232, 0.3);
    width: 2.5rem;
    background: #fff;
    margin: .2rem .15rem;
    border-radius: .14rem;
    border: 1px solid #eee;

  }
  .playicon{
    width: 1rem !important;
    height: .4rem;
  }
  .videosty{
    width: 100%;
    height: 2.3rem;
    margin-bottom: .2rem;
  }
  .cu-form-group{
    padding: .3rem 2%;
    border-bottom: 1px solid #efefef;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 96%;
  }
  .cu-form-group .title{
    width: 1.6rem;
  }
  .cu-form-group textarea{
    min-height: 3rem;
    width: 100%;
  }
  .cu-form-group input{
    /*margin-left: .2rem;*/
  }
  .sonsulttig{
    width: 100%;
    background: rgba(227, 180, 19, 0.3);
    padding: .1rem 0;
    color: #000;
  }
  .sonsulttig p{
    padding: .1rem .2rem;
    font-size: .20rem
  }
  .formrichText{
    text-align: center;
    color: #999;
    margin-top: .2rem;
    display: block;
  }
  .formrichText b{
    font-size: .28rem;
    font-weight: bold;
    color: #E37713;
  }
  .addfile{
    border-top: .2rem solid #f5f5f5;
  }
  input[type=file] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    top: 0;
    left: 0;
  }
  .col-4{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .bg-img{
    width: 20%;
    margin: 0 .1rem;
  }
  .bg-img img{
    width: 100%;
  }
</style>
